<template>
  <el-dialog v-draggable title="配置" :visible.sync="dialogVisible" :close-on-click-modal="false" width="50vw">

    <div class="title-container">
      <div class="search-content">
        <el-form :model="searchModel" :inline="true">
          <el-form-item>
            <el-input v-model="searchModel.workModelName" placeholder="请输入工作流名称" @clear="searchClick" clearable
              prefix-icon="el-icon-search" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
          </el-form-item>
          <el-button type="success" @click="addList" icon="el-icon-plus">添加</el-button>
        </el-form>
      </div>
    </div>

    <common-table :tableHeight="'300'" v-loading="tableLoading" show-index show-check-box :columns="columns" :list="list">
    </common-table>
    <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
      @pagination="pagination" />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
    </span>

    <template v-if="dialogListVis">
      <List :applicationCode="applicationCode" :dialogVis="dialogListVis" @update:dialogVis="closeDialog"></List>
    </template>

  </el-dialog>
</template>

<script>
import List from "./list.vue"
import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
import { queryPageLApplicationToWorkModel, deleteBApplicationToWorkModel } from "@/api/businessScenario/index"

export default {
  props: {
    dialogVis: {
      type: Boolean,
      default: () => false
    },
    applicationCode: {
      type: String
    }
  },
  components: {
    CommonTable,
    List
  },

  data () {
    return {
      type: 0,
      dialogListVis: false,
      tableLoading: false,
      searchModel: {
        workModelName: ""
      },
      columns: [
        {
          title: "工作流模型名称",
          prop: "workModelName",
          align: "center"
        },
        {
          title: "工作流模型版本号",
          prop: "workModelVersion",
          align: "center"
        },
        {
          title: "工作流模型类型",
          prop: "workModelType",
          align: "center"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [h("el-button", {
              props: {
                type: "danger",
                size: "mini"
              },
              on: {
                click: () => {
                  this.handleDetail(params)
                }
              }
            }, "删除")])
          }
        }
      ],
      list: [],
      page: {
        pageSize: 10,
        pageIndex: 1
      },
      count: 0
    }
  },
  created () {
  },
  mounted () {
    this.getTableList()
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.dialogVis
      },
      set: function (v) {
        this.$emit("update:dialogVis", v)
      }
    }
  },
  methods: {
    pagination (pageItem) {
      this.page.pageIndex = pageItem.page
      this.page.pageSize = pageItem.limit
      this.getTableList()
    },
    async getTableList () {
      // this.tableLoading = true
      const { workModelName } = this.searchModel
      const { status, success, object, message } = await queryPageLApplicationToWorkModel({
        ...this.page,
        applicationCode: this.applicationCode,
        workModelName
      })
      if (status == "200") {
        this.list = object.data
        this.count = object.count
        // this.tableLoading = false
      }
    },
    searchClick () {
      this.getTableList()
    },
    async handleDetail (row) {
      const { status, success, object, message } = await deleteBApplicationToWorkModel({ lApplicationToWorkCode: row.row.lApplicationToWorkCode })
      if (status == "200") {
        this.$message({
          type: "success",
          message: message
        })
        this.getTableList()
      }
    },
    addList () {
      this.dialogListVis = true
    },
    closeDialog () {
      this.getTableList()
      this.dialogListVis = false
    }
  }

}
</script>

<style lang="scss" scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}

::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__footer {
    text-align: center !important;
  }
}

::v-deep .el-dialog__header {
  border-radius: 8px 8px 0 0;
  background-color: #e6e6e6;
}

.ml-3 {
  margin-left: 12px;
}


.my_span {
  font-size: 16px;
}

.my_table {
  margin-top: 16px;
}

.dialog-foote {
  text-align: center;
}
</style>

